<!--
 * @Author: 赖钊亮
 * @Description: 我的客服界面
 * @Date: 2020-07-02 12:52:19
 * @LastEditTime: 2020-07-03 17:31:01
 * @LastEditors: Please set LastEditors
 * @FilePath: \mobile_item_121f:\JK\jkshopping\src\pages\my\components\service.vue
--> 
<template>
  <div>
    <!--我的客服顶部 -->
    <van-nav-bar title="我的客服" left-text="返回" left-arrow @click-left="goBack" />

    <!-- 客服电话 -->
    <div class="PHONE">
      <div class="dialphone">
        <van-icon name="service-o" class="phone-icon" />
        <span class="phone">客服电话:13800138000</span>
        <van-button type="default" plain size="small" color="#ff606c" @click="Bdphone">拨打</van-button>
      </div>
    </div>
    <!-- 我的聊天框 -->
    <div class="mychat">
      <div class="my-content">
        <div class="my-info">
          <div class="my-text">
            <span class="my-message">{{this.vip.username}}</span>
            <span class="my-time">2017-12-11 17:34</span>
          </div>
          <van-image :src="this.vip.avatar" round />
          <div class="my-frame">
            <p>客服您好!我想退货</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 客服聊天框 -->
    <div class="kfchat">
      <div class="kf-content">
        <div class="kf-info">
          <div class="kf-text">
            <span class="kf-message">客服留言</span>
            <span class="kf-time">2017-12-11 17:34</span>
          </div>
          <van-image :src="this.vip.avatar" round />
          <div class="kf-frame">
            <p>好的</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部输入框 -->
    <div class="input">
      <van-field center clearable label="留言区" placeholder="请输入留言内容">
        <template #button>
          <van-button size="small" type="primary" @click="send">发送</van-button>
        </template>
      </van-field>
    </div>
  </div>
</template>

<script>
import * as api from "@/api/apiList/user/user.js";
export default {
  data() {
    return {
      vip: ""
    };
  },
  methods: {
    // 返回上一页
    goBack() {
      this.$router.go(-1);
    },
    // 拨打电话按钮弹出框
    Bdphone() {
      this.$dialog
        .confirm({
          message: "是否拨打电话"
        })
        .then(() => {
          this.$toast.loading({
            message: "该功能尚未完善",
            forbidClick: true,
            icon: "fail"
          });
        })
        .catch(() => {
          // on cancel
        });
    },
    // 获取用户信息
    async API_user_info() {
      return await api.user_info();
    },
    send() {
      this.$dialog
        .alert({
          message: "功能尚未完善"
        })
        .then(() => {
          // on close
        });
    }
  },
  async created() {
    // 用户信息
    let res = await api.user_info();
    if (res.data.code === 200) {
      this.vip = res.data.data.user;
      console.log(this.vip);
    }
  }
};
</script>

<style lang="scss" scoped>
//电话
.PHONE {
  //客服电话
  .dialphone {
    background-color: white;
    width: 100%;
    padding: 15px;
    box-sizing: border-box;
  }
  //客服图标
  .van-icon {
    color: #ff4755;
    font-size: 20px;
  }
  //电话号码
  .phone {
    position: relative;
    bottom: 5px;
    left: 20px;
    font-size: 14px;
  }
  //拨打按钮
  .van-button {
    position: absolute;
    left: 300px;
  }
}
//我的聊天框
.mychat {
  width: 100%;
  height: 150px;
  .my-content {
    float: right;
    width: 80%;
    margin-top: 50px;
    .my-info {
      .van-image {
        float: right;
        top: -30px;
        right: 20px;
        margin-top: 20px;
        margin-left: 50px;
        width: 20%;
      }
      .my-message {
        width: 50px;
        color: #666666;
        font-size: 15px;
      }
      .my-time {
        display: block;
        color: #bbbbbb;
      }
      .my-text {
        position: absolute;
        text-align: right;
        right: 100px;
      }
      .my-frame {
        position: absolute;
        left: 190px;
        top: 210px;
        background: #ff4755;
        border-radius: 10px;
        p {
          padding: 15px;
          box-sizing: border-box;
          color: white;
          font-size: 15px;
        }
      }
    }
  }
}
//客服聊天框
.kfchat {
  width: 100%;
  height: 150px;
  .kf-content {
    float: left;
    width: 80%;
    margin-top: 50px;
    .kf-info {
      .van-image {
        float: left;
        top: -30px;
        right: 30px;
        margin-top: 20px;
        margin-left: 50px;
        width: 20%;
      }
      .kf-message {
        width: 50px;
        color: #666666;
        font-size: 15px;
      }
      .kf-time {
        display: block;
        color: #bbbbbb;
      }
      .kf-text {
        position: absolute;
        text-align: left;
        left: 100px;
      }
      .kf-frame {
        position: absolute;
        left: 90px;
        top: 340px;
        background: #ff4755;
        border-radius: 10px;
        p {
          padding: 15px;
          box-sizing: border-box;
          color: white;
          font-size: 15px;
        }
      }
    }
  }
}
//输入框
.input {
  position: fixed;
  bottom: 0;
  /deep/ .van-field {
    position: fixed;
    bottom: 0;
  }
}
</style>